<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BC显示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>

    <link href="css/mui.picker.css" rel="stylesheet"/>
    <link href="css/mui.poppicker.css" rel="stylesheet"/>
    <link href="css/baiyi.css" rel="stylesheet">
    <script src="js/angular.min.js"></script>
    <style>
        th, td {
            font-size: 12px;
        }
    </style>
</head>

<body ng-app="quotation" ng-controller="quoCtrl">

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="index.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">报价单</span>
    </a>
    <a class="mui-tab-item" href="steelStruct.html">
        <span class="mui-icon mui-icon-settings"></span>
        <span class="mui-tab-label">钢结构图纸</span>
    </a>
    <a class="mui-tab-item" href="dRendering.html">
        <span class="mui-icon mui-icon-starhalf"></span>
        <span class="mui-tab-label">动态效果</span>
    </a>
    <a class="mui-tab-item" href="personalCenter.html">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>

<div class="mui-content">

    <div id="quotation" class="mui-control-content mui-active">
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">报价单</h1>
            <a class="mui-pull-right headA" href="javascript:void(0)" ng-click="download()">下载</a>
        </header>
        <div>

            <div class="headMarginTop"></div>

            <div class="mui-row">
                <div class="mui-col-xs-6 alignCenter">产品型号：{{modelName}}</div>
                <div class="mui-col-xs-3">宽：{{width}}</div>
                <div class="mui-col-xs-3">高：{{height}}</div>
            </div>

            <table id="productPriceTable" style="text-align: center; width: 100%" border="1" cellpadding="2"
                   cellspacing="0">
                <thead>
                <tr>
                    <th colspan="7">产品报价</th>
                </tr>
                <tr>
                    <th width="50px;">序号</th>
                    <th width="100px;">名称</th>
                    <th width="100px;">规格</th>
                    <th width="100px;">数量</th>
                    <th width="100px;">单位</th>
                    <th width="100px;">单价</th>
                    <th width="100px;">总金额</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="modelPrice in modelPrices">
                    <td>{{modelPrice.indexCode}}</td>
                    <td>{{modelPrice.name}}</td>
                    <td>{{modelPrice.model}}</td>
                    <td>{{modelPrice.sum}}</td>
                    <td>{{modelPrice.unit}}</td>
                    <td>{{modelPrice.price}}</td>
                    <td>{{modelPrice.totalPrice}}</td>
                </tr>
                <tr>
                    <th colspan="7" style="color: red">含17%增值税：{{countPrice}}</th>
                </tr>
                </tbody>
            </table>


            <div class="paddingTop"></div>
            <table id="productBoxTable" style="text-align: center; width: 100%" border="1" cellpadding="2"
                   cellspacing="0">
                <thead>
                <tr>
                    <th colspan="7">箱体</th>
                </tr>
                <tr>
                    <th width="50px;">序号</th>
                    <th width="100px;">名称</th>
                    <th width="100px;">规格</th>
                    <th width="100px;">数量</th>
                    <th width="100px;">单位</th>
                    <th width="100px;">单价</th>
                    <th width="100px;">总金额</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="modelBox in modelBoxes">
                    <td>{{modelBox.indexCode}}</td>
                    <td>{{modelBox.name}}</td>
                    <td>{{modelBox.model}}</td>
                    <td>{{modelBox.sum}}</td>
                    <td>{{modelBox.unit}}</td>
                    <td>{{modelBox.price}}</td>
                    <td>{{modelBox.totalPrice}}</td>
                </tr>
                </tbody>
            </table>


            <div class="paddingTop"></div>
            <table id="productMozuTable" style="text-align: center; width: 100%" border="1" cellpadding="2"
                   cellspacing="0">
                <thead>
                <tr>
                    <th colspan="7">模组</th>
                </tr>
                <tr>
                    <th width="50px;">序号</th>
                    <th width="100px;">名称</th>
                    <th width="100px;">规格</th>
                    <th width="100px;">数量</th>
                    <th width="100px;">单位</th>
                    <th width="100px;">单价</th>
                    <th width="100px;">总金额</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="modelMozu in modelMozus">
                    <td>{{modelMozu.indexCode}}</td>
                    <td>{{modelMozu.name}}</td>
                    <td>{{modelMozu.model}}</td>
                    <td>{{modelMozu.sum}}</td>
                    <td>{{modelMozu.unit}}</td>
                    <td>{{modelMozu.price}}</td>
                    <td>{{modelMozu.totalPrice}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


</div>

</body>

<script src="js/mui.min.js"></script>
<script src="globalVar.js"></script>
<script>

    mui.init({
        swipeBack: false //启用右滑关闭功能
    });

    var app = angular.module('quotation', []);
    app.controller('quoCtrl', function ($scope, $http) {

        $scope.width = "";
        $scope.height = "";
        $scope.modelName = "";
        $scope.token = "";
        $scope.modelId = "";

        var width = localStorage.getItem("width");
        var height = localStorage.getItem("height");
        var modelName = localStorage.getItem("modelName");
        var modelId = localStorage.getItem("modelId");

        if (width === null) {
            $scope.width = 5;
        } else {
            $scope.width = width;
        }
        if (height === null) {
            $scope.height = 5;
        } else {
            $scope.height = height;
        }
        if (modelName === null) {
            $scope.modelName = "P8";
        } else {
            $scope.modelName = modelName
        }
        if (modelId === null) {
            $scope.modelId = 1;
        } else {
            $scope.modelId = modelId
        }
        $scope.token = localStorage.getItem("token");

        $http({
            method: "GET",
            url: url + "/product/productBox?token=" + $scope.token + "&productId=" + $scope.modelId,
        }).then(
            function success(response) {
                $scope.modelBoxes = response.data.obj;
            },
            function error(response) {
                console.log("productBox");
                location.href = "login.html";
            }
        );

        $http({
            method: "GET",
            url: url + "/product/productMozu?token=" + $scope.token + "&productId=" + $scope.modelId,
        }).then(
            function success(response) {
                //console.log(response.data.obj)
                $scope.modelMozus = response.data.obj;
            },
            function error(response) {
                console.log("productMozu");
                location.href = "login.html";
            }
        );

        $http({
            method: "GET",
            url: url + "/product/price?token=" + $scope.token + "&productId="
                        + $scope.modelId + "&width="
                        + $scope.width + "&height=" + $scope.height
        }).then(
            function success(response) {
                console.log(response.data)
                $scope.modelPrices = response.data.listProductPrice;
                $scope.countPrice = response.data.countPrice;
            },
            function error(response) {
                console.log("price");
                location.href = "login.html";
            }
        );

        function downloadFile(url) {
            try{
                var elemIF = document.createElement("iframe");
                elemIF.src = url;
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            }catch(e){
                location.href = "login.html";
            }
        }

        $scope.download = function download() {
            $scope.modelName = $scope.modelName.substring($scope.modelName.length-2,$scope.modelName.length);
            var btnArray = ['否', '是'];
            mui.confirm('是否下载', '报价单下载', btnArray, function(e) {
                if (e.index == 1) {
                    $http({
                        method: "GET",
                        url: url + "/download/quotation?token=" + $scope.token + "&productId="
                        + $scope.modelId + "&width="
                        + $scope.width + "&height=" + $scope.height + "&modelName=" + $scope.modelName
                    }).then(
                        function success(response) {
                            if (response.data.success){
                                var downloadPath = url + "/download/quotationDownload?token=" + $scope.token + "&productId="
                                    + $scope.modelId + "&width="
                                    + $scope.width + "&height=" + $scope.height + "&modelName=" + $scope.modelName;
                                downloadFile(downloadPath);
                            }else {
                                alert(response.data.msg);
                            }
                        },
                        function error(response) {
                            location.href = "login.html";
                        }
                    );
                } else {

                }
            })


        }


    });

    mui('body').on('click', 'nav a', function () {
        document.location.href = this.href;
    });
</script>
</html>